<template>
	<view class="home-page-container" @touchmove.stop.prevent="() => {}">
		<view class="right_top_bg"></view>
		<view class="right_top_bg2"></view>
		<view class="left_bottom_bg"></view>
		<view class="right_bottom_bg">
			<image src=".././static/images/login-icon-bg.png" mode="aspectFit"></image>
		</view>
		<view :style="{ height: barTop + 'px' }"></view>
		<view class="title" :style="{ height: barHeight + 'px' }">登录</view>
		<view class="tip">
			<view>您好！</view>
			<view>欢迎使用Cupid!</view>
		</view>
		<view class="phone_input">
			<u-input v-model="phone" placeholder="请输入手机号" border="surround" type="number"></u-input>
		</view>
		<view class="code_input">
			<u-input v-model="phone" placeholder="请输入验证码" border="surround" type="number">
				<template slot="suffix">
					<u-code ref="uCode" seconds="60" changeText="X秒后重新获取" @change="codeChange"></u-code>
					<u-button @tap="getCode" :text="codeBtnText" size="mini"></u-button>
				</template>
			</u-input>
		</view>
		<view class="login_btn">
			<u-button text="登录" :disabled="isDisabled"></u-button>
		</view>
	</view>
</template>
<script>
	import {
		getWXStatusHeight
	} from "@/util/common";
	export default {
		data() {
			return {
				barTop: 0,
				barHeight: 0,
				codeBtnText: '获取手机验证码',
				isCheckedRadio: false,
				isDisabled: true,
			}
		},
		mounted() {
			this.barTop = getWXStatusHeight().barTop
			this.barHeight = getWXStatusHeight().barHeight
		},
		methods: {
			codeChange(text) {
				this.codeBtnText = text
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.home-page-container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.right_top_bg {
		position: absolute;
		right: -50px;
		top: -75px;
		width: 209px;
		height: 209px;
		opacity: 1;
		background: linear-gradient(221.47deg, rgba(227, 16, 65, 1) 0%, rgba(255, 158, 181, 1) 100%);
		border-radius: 50%;
	}

	.right_top_bg2 {
		position: absolute;
		top: -75px;
		right: -50px;
		width: 274.08px;
		height: 274.08px;
		opacity: 1;
		background: rgba(255, 163, 185, 1);
		filter: blur(150px);
		border-radius: 50%;
	}

	.left_bottom_bg {
		position: absolute;
		left: -100px;
		bottom: -60px;
		width: 220px;
		height: 220px;
		opacity: 1;
		background: rgba(255, 163, 185, 1);
		filter: blur(150px);
		border-radius: 50%;
	}

	.right_bottom_bg {
		position: absolute;
		right: -100px;
		bottom: -30px;
	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0px;
		color: rgba(38, 38, 38, 1);
	}

	.tip {
		margin-top: 70px;
		margin-left: 70rpx;
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 0px;
		line-height: 31.82px;
		color: rgba(0, 0, 0, 1);
	}

	.phone_input {
		margin: 35px 70rpx 20px 70rpx;
	}

	.code_input {
		margin: 0 70rpx 20px 70rpx;
	}

	.login_btn {
		width: calc(100vw - 140rpx);
		margin: 0 70rpx;
		border-radius: 50px;
		background: rgba(255, 143, 169, 1);
	}
</style>